<template>
  <div id="app-config">
    <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item label="游览器API">
        <a-input v-model:value="formState.browserApi" />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="onSubmit">修改</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script>
import { defineComponent, reactive, toRaw } from "vue";
export default defineComponent({
  setup() {
    const formState = reactive({
      browserApi: "http://127.0.0.1:54345",
    });
    const onSubmit = () => {
      console.log("submit!", toRaw(formState));
    };
    return {
      labelCol: {
        style: {
          width: "150px",
        },
      },
      wrapperCol: {
        span: 14,
      },
      formState,
      onSubmit,
    };
  },
});
</script>
<style lang="less" scoped>
#app-config {
  padding: 10px 10px;
  text-align: left;
  width: 100%;
  .one-block-1 {
    font-size: 16px;
    padding-top: 10px;
  }
  .one-block-2 {
    padding-top: 10px;
  }
}
</style>
